<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <style type="text/css">
      #map {
        height: 700px;
        width: 1000px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
      type="text/javascript"
    ></script>
    <!-- 引入中国地图插件 -->
    <script src="./L.PolylineDecorator.js"></script>
    <script type="text/javascript">
      let map = L.map("map").setView([36.09, 120.35], 13);
      L.tileLayer(
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        {
          attribution: "",
        }
      ).addTo(map);

      //绘制图层
      let drawnItems = new L.FeatureGroup();
      //添加绘制图层
      map.addLayer(drawnItems);

      //1.绘制线
      let arrow = L.polyline(
        [
          [36.09, 120.35],
          [36.1, 120.38],
        ],
        {
          //颜色
          color: "red",
        }
      ).addTo(drawnItems);
      //添加箭头
      let arrowHead = L.polylineDecorator(arrow, {
        //添加模式
        patterns: [
          {
            //模式符号的偏移位置
            offset: "100%",
            //模式符号的重复间隔
            repeat: 0,
            //符号实例
            symbol: L.Symbol.arrowHead({
              //符号大小
              pixelSize: 15,
              //符号样式
              pathOptions: {
                //是否显示边线
                stroke: true,
              },
            }),
          },
        ],
      }).addTo(drawnItems);

      //2.绘制虚线矩形
      let pathPattern1 = L.polylineDecorator(
        [
          [36.11, 120.3],
          [36.11, 120.33],
          [36.14, 120.33],
          [36.14, 120.3],
          [36.11, 120.3],
        ],
        {
          //添加模式
          patterns: [
            {
              //模式符号的偏移位置
              offset: 12,
              //模式符号的重复间隔
              repeat: 25,
              //符号实例
              symbol: L.Symbol.dash({
                //符号大小
                pixelSize: 10,
                //符号样式
                pathOptions: {
                  //颜色
                  color: "#f00",
                  //线宽
                  weight: 2,
                },
              }),
            },
            {
              //模式符号的偏移位置
              offset: 0,
              //模式符号的重复间隔
              repeat: 25,
              //符号实例
              symbol: L.Symbol.dash({
                //符号大小
                pixelSize: 0,
              }),
            },
          ],
        }
      ).addTo(drawnItems);

      //3.绘制图案
      let pathPattern = L.polylineDecorator(
        [
          [36.15, 120.38],
          [36.14, 120.39],
          [36.13, 120.42],
          [36.11, 120.44],
          [36.09, 120.49],
        ],
        {
          //添加模式
          patterns: [
            {
              //模式符号的偏移位置
              offset: 0,
              //模式符号的重复间隔
              repeat: 10,
              //符号实例
              symbol: L.Symbol.dash({
                //符号大小
                pixelSize: 5,
                //符号样式
                pathOptions: {
                  //颜色
                  color: "blue",
                  //线宽
                  weight: 1,
                  //透明度
                  opacity: 1,
                },
              }),
            },
            {
              //模式符号的偏移位置
              offset: "0%",
              //模式符号的重复间隔
              repeat: "20%",
              //符号实例
              symbol: L.Symbol.marker({
                //是否允许旋转
                rotate: true,
                //标记显示样式
                markerOptions: {
                  //图标
                  icon: L.icon({
                    //图标地址
                    iconUrl: "./images/icon_plane.png",
                    //图标位置
                    iconAnchor: [16, 16],
                  }),
                },
              }),
            },
          ],
        }
      ).addTo(drawnItems);
    </script>
  </body>
</html>
